<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <div class="header">
			<div class="title">
				<div class="title-h">
					<div class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>
					</div>
					<div class="txt-h">
						转账
					</div>					 
				</div>				
			</div>			
		</div>
		<div class="content_panel">
			<div class="content">
				<div class="header_img">
					<img width="80px" height="80px" :src="user_img" alt="" srcset="">
				</div>
				<div class="header_text">
					转账给【个人账户】昵称【{{ payeeName }}】
				</div>
			</div>
			<div class="mid_content">
				<div class="txt">
					转账金额
				</div>
				<div class="input_area">
					<div class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M448 32h-80L256 253.13 144 32H64l112.37 208H128v48h73.56L216 319v17h-88v48h88v96h80v-96h88v-48h-88v-17l14.89-31H384v-48h-48.29z"/></svg>
					</div>
					<div class="o_input">
						<input type="number" v-model="moneyValue">
					</div>					
				</div>
				<div class="input_remark">
					<input id="remark" type="text" v-model="order_remark" max="20" placeholder="添加备注(20字以内)">
				</div>
				<div class="button_area">
					<button @click="doPay" class="el-button el-button--primary el-mybtn">确认转账</button>
				</div>
			</div>
		</div>    
  </div>
</template>
<script>
//引入外部组件
//import menu from ''
export default {
  name: "paymentpage", //定义组件的名称
  data() {
    //定义组件内部变量
    return {
      payeeId: 1,
      payeeName: "**华",
      paymentId: 2,
      paymentName: "张三",
      moneyValue: 0.0,
      order_remark: "",
      user_img:require("@/assets/img/img-demo.jpeg"),
    };
  },
  methods: {
    async doPay() {
      console.log("付款金额" + this.moneyValue);

      //提交后端数据,返回的是提交后的结果
      var resData = await this.$http.post("fkpay", {
        order_payee: this.payeeId,
        order_payer: this.paymentId,
        order_payMoney: this.moneyValue,
        order_remark: this.order_remark,
      });
      
      console.log(resData.state);
      if(resData.state==200){
        this.$router.push("/PaySuccessful");
      }
    },
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
/* 顶部搜索栏 */
.header {	
	background-color: #ffffff;
	color: #000;
	width: 100%;
	border-bottom: solid 1px #ccc;
}

.header .title {
	font-size: 18px;
	margin-left: 20px;
	padding: 20px 0;
}

.title-h {
	display: flex;
	flex-direction: row;
	vertical-align: middle;
	align-items: center;
}

.title-h .icon {
	width: 30px;
	height: 30px;
}

/* 转账内容 */
.content_panel {
	text-align: center;
	font-size: 18px;
	padding: 15px 0;
}

.content_panel .header_text {
	color: #000;
	font-size: 14px;
}

.mid_content {
	text-align: left;
	color: #000;
	font-size: 12px;
	padding: 30px 10px;
}

.input_area {
	padding: 20px 0;
	border-bottom: solid 1px #ccc;
	display: flex;
}

.input_area .icon {
	width: 25px;
	height: 25px;
}

.input_area input {
	height: 30px;
	width: 300px;
	font-size: 35px;
	outline: none;
}

.input_remark input {
	outline: none;

}

.button_area{
	padding: 20px 0;
}

.el-button {
	
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	background: #fff;
	border: 1px solid #dcdfe6;
	color: #606266;
	-webkit-appearance: none;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition: .1s;
	font-weight: 500;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 4px;
}

.el-button--primary{
	color: #fff;
	background-color: #409eff;
	border-color: #409eff;
}

.el-mybtn{
	width: 100%;
}
</style>